<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <script>
         $(function(){
            $("#btn1").click(function(){
                $("#first span").css("background","red");
            });
            $("#btn2").click(function(){
                $("#first > span").css("background","yellow");
            });
            $("#btn3").click(function(){

                //紧邻在id为last后面的所有同级别的p元素
                $("#last + p").css("background","yellow");
            });
            $("#btn4").click(function(){

                // div后面的所有同级别的h5元素
                $("div ~ h5").css("background","yellow");
            });

          
        });
    </script>
</head>
<body>
    <input type="button" value="后代选择器" id="btn1">
    <input type="button" value="子元素选择器" id="btn2">
    <input type="button" value="相邻选择器" id="btn3">
    <input type="button" value="兄弟选择器" id="btn4">
    <h5>h5</h5>
    <div>最前面的div</div>
    <div id="first">div01
        <p>
            <span>s1</span>
            <span>s2</span>
        </p>
        <span>s3</span>
        <span>s4</span>
    </div>
    <div class="hehe">div02</div>
    <div>div03</div>
    <div class="hehe">div04</div>
    <div id="last">div05</div>
    <p>p01</p>
    <p>p02</p>
    <div class="hehe">div06</div>
    <h5>h5</h5>
    <h5>h5</h5>
    <h5>h5</h5>
    <p class="hehe">p03</p>
    <p>p04</p>
    <p class="hehe">p05</p>
    <h5>h5</h5>
    <h5>h5</h5>
    <h5>h5</h5>
    <h5>h5</h5>
    <h5>h5</h5>
    <span>span01</span>
</body>
</html>